<template>
  <el-dialog v-model="open" title="邮箱管理" @open="openEmail" @close="closeEmail">
    <el-form :model="form" label-width="100px" :inline="true" :rules="rules" ref="formRef">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" clearable @clear="getList"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址" prop="email">
        <el-input v-model="form.email" clearable @clear="getList"></el-input>
      </el-form-item>
      <el-row>
        <el-form-item label=" ">
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="primary" @click="addEmail">添加</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-divider border-style="dashed"></el-divider>

    <el-table :data="dataList" v-loading="loading" stripe>
      <el-table-column label="姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="deletItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="form.total > 0" :total="form.total" v-model:page="form.page"
      v-model:limit="form.rows" @pagination="getList" />

    <template #footer>
      <el-button type="primary" @click="closeEmail">确定</el-button>
      <el-button plain @click="closeEmail">退出</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { saveEmail, getEmail, checkEmail, deleteEmail } from '@/api/quickMapping/dataManage/plotSettings'

const props = defineProps({
  open: Boolean
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()
const form = ref({
  page: 1,
  rows: 10,
  total: 0
})
const dataList = ref([])
const loading = ref(false)
const getList = () => {
  loading.value = true
  const { name, email, page, rows } = form.value
  getEmail({ name, type: email, page, rows }).then(res => {
    proxy.$refs.formRef.clearValidate()
    loading.value = false
    dataList.value = res.data.rows
    form.value.total = res.data.total
  })
}
const openEmail = () => {
  getList()
}
const closeEmail = () => {
  proxy.resetForm('formRef')
  emits('update:open', false)
}
const rules = {
  name: [{ required: true, message: '请填写姓名！' }],
  email: [
    { required: true, message: '请填写邮箱！' },
    { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请输入正确的邮箱格式！', trigger: 'blur' }
  ]
}
// 添加
const addEmail = () => {
  proxy.$refs.formRef.validate(async valid => {
    if (valid) {
      const { name, email } = form.value
      let res = await checkEmail(email)
      if (res.data) {
        let result = await saveEmail({ name, email })
        if (result.code == 200) {
          proxy.resetForm('formRef')
          proxy.$modal.msgSuccess('添加成功！')
          getList()
        }
      } else {
        proxy.$modal.msgError('邮箱重复！')
      }
    }
  })
}
// 删除
const deletItem = (item) => {
  proxy.$modal.confirm(`是否确定删除${item.name}?`).then(() => {
    return deleteEmail([item.id])
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  }).catch(() => {})
} 
</script>